<template>
    <div class="label-select">
        <div class="label-style">
            <slot></slot>
            {{labelName}}
        </div>
        <div class="select-style">
            <a-range-picker v-model:value="selectDateRangeRef" @change="changeFunc"
            />
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'LabelDatePicker'
}
</script>
<script lang="ts" setup>
import {reactive, ref, watch} from 'vue';
import type { Dayjs } from 'dayjs';

const props = defineProps({
    labelName: String,
    selectDateRange: Array,
    placeholder: String,
    inputWidth: {
        type: Number,
        default: 15
    },
})
const selectDateRangeRef = ref(props.selectDateRange)

const emits = defineEmits(["update:selectDateRange",'selectedChangeFunc'])

const changeFunc = (dates: [Dayjs, Dayjs] | string, dateString: string) => {
  emits('update:selectDateRange', dates);
  emits('selectedChangeFunc', dates);
}
</script>
<style lang="less" scoped>
.label-select {
    height: 32px; // 默认输入框高度为32px
    display: flex;
    align-items: center;

    .select-style {
        margin-left: 10px;
    }

    :deep(.ant-select-selector) {
        text-align: left;
    }
}
</style>